<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml">
  <head> 
    <title> 
      New JavaScript SDK
    </title> 
  </head> 
<body> 
 	
<div id="fb-root"></div>
<h2>Updated JS SDK example</h2><br />
<div id="user-info"></div>
<p><button id="fb-auth">Login</button></p>

<script>
window.fbAsyncInit = function() {
  FB.init({ appId: '226165874117410', 
	    status: true, 
	    cookie: true,
	    xfbml: true,
	    oauth: true});

  function updateButton(response) {
    var button = document.getElementById('fb-auth');
		
	if (response.authResponse) {
		//user is already logged in and connected
		var userInfo = document.getElementById('user-info');
		FB.api('/me', function(response) {
			userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
			button.innerHTML = 'Logout';
		});
		button.onclick = function() {
			FB.logout(function(response) {
				var userInfo = document.getElementById('user-info');
				userInfo.innerHTML="";
			});
		};
	} else {
		//user is not connected to your app or logged out
		button.innerHTML = 'Login';
		button.onclick = function() {
			FB.login(function(response) {
				if (response.authResponse) {
					FB.api('/me', function(response) {
						var userInfo = document.getElementById('user-info');
						userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture" style="margin-right:5px"/>' + response.name;
					});	   
				} else {
					//user cancelled login or did not grant authorization
				}
			}, {scope:'email'});  	
		}
	}
  }

  // run once with current status and whenever the status changes
  FB.getLoginStatus(updateButton);
  FB.Event.subscribe('auth.statusChange', updateButton);	
};
	
(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol 
    + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());

</script>
</body> 
</html>
